<template>
  <view class="padding-bottom-button">
    <l-background />
    <view v-if="list.length" class="padding-lr-30 padding-bottom-30">
      <view v-for="(item,index) in list" :key="index" class="card padding-30 margin-top-30">
        <view class="relative">
          <text class="text-28 color-t1">{{ item.startDate }} 至 {{ item.endDate }}</text>
          <view class="margin-top-16">
            <text class="text-28 color-error">￥{{ item.price }}/天</text>
          </view>
          <view class="buttons flex-row">
            <tui-button width="120rpx" height="56rpx" border-radius="8rpx" :size="24" plain type="gray" text="删除" @click="del(item)" />
            <view class="margin-left-10">
              <tui-button width="120rpx" height="56rpx" border-radius="8rpx" :size="24" text="编辑" :shadow="false" @click="edit(item)" />
            </view>
          </view>
        </view>
      </view>
      <l-footer :has-more="hasMore" />
    </view>
    <template v-else>
      <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
      <l-no-data v-else text="暂无数据" type="data" />
    </template>

    <tui-modal title="提示" content="是否确定删除该产品的特殊定价？" :show="show" @click="close" />

    <safe-area-bottom />
    <l-bottom-button text="添加" @click="jump('/vehicle/set-price/set-price?type=add&endDate=' + endDate)" />
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { getProductPriceList } from '@/common/api/car'
import { deletePrice } from '../api'
import { preloadData } from './index'
export default {
  name: 'PriceList',
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 999,
      hasMore: true,
      showSkeleton: true,
      show: false,
      item: {},
      endDate: '',
      preloadData
    }
  },
  computed: {
    ...mapGetters({
      setPriceVehicle: 'setPriceVehicle'
    })
  },
  onShow() {
    this.reload()
  },
  created() {
    uni.setNavigationBarTitle({
      title: this.setPriceVehicle.productName
    })
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    async getList() {
      const info = this.setPriceVehicle
      const [err, res] = await getProductPriceList({
        vehicleTypeId: info.vehicleTypeId,
        productId: info.productId,
        page: this.page,
        limit: this.pageSize,
        defaultPrice: 0
      })
      uni.stopPullDownRefresh()
      this.showSkeleton = false
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data
      if (!list) list = []
      if (list.length < this.pageSize) this.hasMore = false
      if (this.page === 1) this.list = list
      else this.list.push(...list)

      if (list.length) this.endDate = list[list.length - 1].endDate
    },
    reload() {
      this.hasMore = true
      this.page = 1
      this.getList()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getList()
      }
    },
    // 编辑价格
    edit(item) {
      this.setSetPriceVehicle(item)
      this.jump('/vehicle/set-price/set-price?type=edit')
    },
    // 删除价格
    del(item) {
      this.item = item
      this.show = true
    },
    // 确认删除
    close(e) {
      this.show = false
      if (e.index) {
        this.deleteProduct(this.item.id)
      }
    },
    // 删除产品特殊定价
    async deleteProduct(id) {
      const [err, res] = await deletePrice(id)
      if (!this.$http.errorCheck(err, res)) return false
      this.toast('删除成功')
      this.reload()
    },
    ...mapMutations({
      setSetPriceVehicle: 'vehicle/setSetPriceVehicle'
    })
  }
}
</script>

<style scoped lang="scss">
.buttons{
  @include position(absolute, $right:0, $bottom:0);
}
</style>
